<script setup lang="ts">
import { InvitationList } from '~comp-b/global-popups/invitation';
import { Amount } from '~comp-b/global-popups/invitation/index';
import { Skeleton } from '~/components/skeleton';
import { useHistoryList, useList } from '~/pages/invitation/hooks';
import Countdown from '~/pages/promo/pack/components/Countdown.vue';

const { list, logQuery } = useHistoryList();
const { difference, amount, status, currency } = useList();

const targetH = ref(0);

const authed = useAuthed();
const bodyH = computed(() => {
  return 145;
});

function onResize({ width, height }: { width: number; height: number }) {
  targetH.value = height + 6;
  return {
    width,
    height,
  };
}
</script>

<template>
  <TCard>
    <div class="flex-between items-start gap-15 lt-laptop:gap-10">
      <TCard class="invitetion-spin-card flex-auto shadow-none">
        <Amount :bit="true" class="mb-3" />
        <div class="flex-center flex-col">
          <I18nT v-if="difference > 0 && authed" keypath="agTwCh4pZ9FkrKsXbcHe" tag="p" class="text-sm text-white">
            <template #diff>
              <TNum class="text-red-500" format="clamp-dec" :decimals="2" :value="difference" />
            </template>
          </I18nT>
          <p v-else-if="amount > 100">
            {{ $t('czXyKhorDqV_4Fvqigcar') }}
          </p>
          <span v-if="status?.expire_time" class="inline-block flex text-sm text-sys-text-body">
            {{ $t('qJwORmG51GvBtYzsDIl') }}
            <Countdown class="ml-2" :value="status?.expire_time ?? 0">
              <template #default="{ diff, formatText }">
                <span v-if="diff.d > 0">{{ formatText(diff.d, 'd ', false) }}</span>
                <span>{{ `${formatText(diff.h, ':')}${formatText(diff.m, ':')}${formatText(diff.s)}` }}</span>
              </template>
            </Countdown>
          </span>
        </div>
      </TCard>
      <div class="min-w-2/3 flex-start items-start self-stretch gap-7.5">
        <div class="h-full flex-1">
          <p class="mb-1 text-sys-text-body">
            <i class="i-material-symbols:circle?mask mr2 bg-brand" />{{ $t('1EGe4eU2G1Nwu85Z3tE4x') }}
          </p>
          <TSuspenseView
            v-bind="buildSvPropsOfQuery(logQuery)"
            loadingClass="min-h-200"
            errorClass="min-h-200"
          >
            <swiper-container
              direction="vertical"
              :slidesPerView="5"
              :spaceBetween="0"
              :loop="true"
              :autoplay="{ delay: 1500, reverseDirection: true }"
              :allowTouchMove="false"
              :draggable="false"
              :style="`height:${bodyH}px;`"
              :passiveListeners="true"
              :speed="1200"
              :touchReleaseOnEdges="true"
            >
              <swiper-slide v-for="(i, k) in list" :key="k">
                <div v-element-size="onResize">
                  <I18nT keypath="fp8PCs2rTx3g9jxP2EfCu" tag="div" class="flex-center justify-start text-sys-text-body leading-normal lt-tabletl:text-sm">
                    <template #name>
                      <span class="pr-1 text-white">{{ i?.nickname }} </span>
                    </template>
                    <template #amount>
                      <span class="px-1 text-white"> {{ i?.amount }}
                      </span>
                    </template>
                    <template #currency>
                      {{ currency }}
                    </template>
                  </I18nT>
                </div>
              </swiper-slide>
            </swiper-container>
            <template #pending>
              <Skeleton class="grid grid-cols-2 w-full gap-3">
                <Skeleton
                  v-for="i in 8"
                  :key="i"
                  type="rect"
                  height="25px"
                  class=""
                />
              </Skeleton>
            </template>
          </TSuspenseView>
        </div>
        <div class="divider-v-gradual" />
        <InvitationList class="flex-1" />
      </div>
    </div>
  </TCard>
</template>
